<template>
	<view>
		<button @click.stop="clickFun" hover-class="button_hover" class="my_button">
			<slot name="icon"></slot>
			<slot></slot>
		</button>
	</view>
</template>

<script setup>
	
	const props = defineProps({
		bgc:{
			type:String,
			default:'#65BFC7'
		},
		color:{
			type:String,
			default:'#fff'
		},
		fontSize:{
			type:String,
			default:'18px'
		},
		width:{
			type:String,
			default:'100%'
		},
		height:{
			type:String,
			default:'96rpx'
		},
		borderColor:{
			type:String
		},
		clickFun:{
			type:Function
		},
		padding:{
			type:String,
			default:'0 60rpx'
		},
		borderRadius:{
			type:String,
			default:'12rpx'
		}
	})
	
	const _borderColor = props.borderColor || props.bgc
	
	//点击回调
	const clickFun=()=>{
		if(!props.clickFun) return
		
		props.clickFun()
	}
</script>

<style lang="less">
	.my_button{
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius:v-bind(borderRadius);
		border-width: 1rpx;
		padding: v-bind(padding);
		border-style: solid;
		border-color:v-bind(_borderColor);
		background-color: v-bind(bgc);
		color:v-bind(color);
		font-size: v-bind(fontSize);
		width: v-bind(width);
		height: v-bind(height);
	}
	.my_button::after{ 
		border: none;
	}
	.button_hover{
		background-color: #F5F5F5;
		color: #3B4F68;
		border-color : v-bind(_borderColor)
	}
</style>